<template>
  <div ref="target" class="cart-sku">
    <div class="attrs" @click="toggle">
      <span class="name ellipsis">{{ attrsText }}</span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <!-- 弹出层 -->
    <div v-if="visible" class="layer">
      <div v-if="loading" class="loading"></div>
      <GoodsSku v-else :goods="goods" :sku-id="skuId" @change="changeSku"></GoodsSku>
      <XtxButton v-if="!loading" size="mini" style="margin-left: 60px" type="primary" @click="submit">确认</XtxButton>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'
import API from '@/api/cart'
import GoodsSku from '@/components/goods/GoodsSku'

export default {
  name: 'CartSku',
  components: {
    GoodsSku
  },
  props: {
    attrsText: {
      type: String,
      default: ''
    },
    skuId: {
      type: String,
      require: true
    }
  },
  setup(props, { emit }) {
    const visible = ref(false)
    const target = ref(null)
    const goods = ref(null)
    const loading = ref(false)

    // 打开
    const open = () => {
      loading.value = true
      visible.value = true
      // 获取商品数据 (specs, skus)
      API.getGoodsSku(props.skuId)
          .then(res => {
            goods.value = res.result
            loading.value = false
          })
    }
    // 关闭
    const close = () => {
      visible.value = false
    }

    // 切换
    const toggle = () => {
      visible.value ? close() : open()
    }

    // 点击其他地方关闭
    onClickOutside(target, () => close())

    // 监听sku改变的函数, 记录sku信息
    const curSku = ref(null)
    const changeSku = (sku) => {
      curSku.value = sku
    }

    // 点击确认的时候, 将更改后的sku提交给父组件(购物车组件)
    const submit = () => {
      // curSku有值, 且改变的数据的skuId和props.skuId不一致, 才提交给父组件
      if (curSku.value && curSku.value.skuId && curSku.value.skuId !== props.skuId) {
        // emit 可以提交一个ref对象吗, 不能, ref在setup中只能用value取值或修改值
        emit('change', curSku.value)
        // 关闭弹出框
        close()
      }
    }
    return {
      toggle,
      visible,
      target,
      goods,
      loading,
      changeSku,
      submit
    }
  }
}
</script>

<style lang="less" scoped>
.cart-sku {
  margin-top: 10px;
  // 与出现的弹出层构成子绝父相
  position: relative;
  display: inline-block;

  .attrs {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border: 1px solid #f5f5f5;

    border-radius: 3px;
    font-size: 14px;
    color: #999;
    cursor: pointer;

    span {
      max-width: 230px;
    }

    i {
      padding-left: 4px;
      font-size: 14px;
    }
  }

  .layer {
    position: absolute;
    z-index: 10;
    left: -1px;
    top: 40px;
    width: 400px;
    padding: 20px;

    border: 1px solid @xtxColor;
    border-radius: 4px;
    box-shadow: 2px 2px 4px lighten(@xtxColor, 50%);
    background: #ffffff;
    font-size: 14px;

    // 使用菱形画出三角形
    &::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 12px;
      width: 12px;
      height: 12px;

      border-left: 1px solid @xtxColor;
      border-top: 1px solid @xtxColor;
      background: #fff;
      transform: scale(.8, 1) rotate(45deg);
    }

    .loading {
      height: 224px;
      background: url("../../assets/images/load.gif") no-repeat center;
      background-size: 65px 65px;
    }
  }
}
</style>
